feat(button): improve badge spacing and stacking by thetaPC · Pull Request #31647 · ionic-team/ionic-framework

thetaPC · 2026-10-23T22:58:03Z

Issue number: resolves internal

What is the current behavior?

A badge without a vertical position sits against the button's label with no gap. In md and ios, a badge taller than the label also makes the button taller, so buttons of the same size have different heights. A badge with a vertical position that overflows its button can also be covered by the button next to it.

What is the new behavior?

A badge without a vertical position in a text button has a gap from the label, set by the new IonButton.size.<size>.badge.margin token: 8px, 10px and 12px in ionic, 8px, 8px and 12px in md, and 4px in ios, the same as each theme's icon gap
A button with a badge drops its vertical padding, so its height comes from min.height and a tall badge no longer grows it. --padding-top and --padding-bottom still override this
A button with a badge sits above the buttons beside it, so a badge that overflows its button stays visible instead of being covered by the next button
Icon-only buttons and the placement of badges with a vertical position don't change

Does this introduce a breaking change?

Yes
No

A badge without a vertical position now has a gap between it and the label, and no longer makes the button taller than its min.height. To remove the gap, set IonButton.size.<size>.badge.margin.start for global styles or --ion-button-size-<size>-badge-margin-start for component-specific styles to 0.

Other information

Known gaps

Two buttons that both have badges can still cover each other's badges. Each button is its own stacking context, so a badge can't rise above another button that also sits on top. A full fix means removing the two rules that create that context: contain: layout on the native element, added for the unbounded ripple in feat(ripple): adds unbounded ripple-effect #16399, and z-index: 1 on the inner element, added for a state overlay in feat(components): improve hover states for buttons #19440 that the migration removed. That changes how every button paints, including the ripple's layering and possibly its performance, and badges would then paint over other page content like sticky list dividers. It needs its own investigation and a full screenshot sweep, so it's tracked in FW-7920

How to test

Check	Preview	What to look for
Badges without a position	ios, md, ionic	In the "badge position: none" sections, text buttons have a gap before the badge, and every button in a row is the same height

The stacking case has no test page: every button on the badge page has a badge. The badge spec checks it instead ("should keep a badge above the next button"), and it fails without the fix.

# Conflicts: # core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-ionic-md-ltr-light-Mobile-Safari-linux.png

…-sync-snapshots

…FW-6838-ios-sync

vercel · 2026-10-23T22:58:09Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
ionic-framework	Ready	Preview	Oct 26, 2026 6:18pm UTC

…FW-6838-ios-sync

…nic-framework into FW-6838-ios-sync-snapshots

# Conflicts: # core/src/components/button/test/basic/index.html

# Conflicts: # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Chrome-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Firefox-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Safari-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Chrome-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Firefox-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Safari-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Safari-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Safari-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Chrome-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Firefox-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Safari-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Chrome-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Firefox-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Safari-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Chrome-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Firefox-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Safari-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Chrome-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Firefox-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Safari-linux.png # core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Chrome-linux.png # core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Firefox-linux.png # core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Safari-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Chrome-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Firefox-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Safari-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Chrome-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Firefox-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Safari-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Safari-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Safari-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Chrome-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Safari-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Chrome-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Safari-linux.png

…md-sync

…-sync-snapshots # Conflicts: # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Chrome-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Firefox-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Safari-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Chrome-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Firefox-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Safari-linux.png # core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Chrome-linux.png # core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Firefox-linux.png # core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Safari-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Chrome-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Firefox-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Safari-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Chrome-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Firefox-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Safari-linux.png

…FW-6838-ios-sync

…os-sync-snapshots # Conflicts: # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Chrome-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Firefox-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Safari-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Chrome-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Firefox-linux.png # core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Safari-linux.png # core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Chrome-linux.png # core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Firefox-linux.png # core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Safari-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Chrome-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Safari-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Chrome-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png # core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Safari-linux.png

… FW-6838-badge-spacing

thetaPC and others added 28 commits October 13, 2026 16:42

test(button): add missing coverage and consolidate snapshots

f69a1b8

test(button): freeze ripples on activated elements in screenshots

26460d7

feat(button): add recipe and tokens

fd55153

chore(): add updated snapshots

01d5d0a

chore(): add updated snapshots

1d3bf59

fix(button): keep datetime's ionic month buttons square

7ea4a96

Merge branch 'FW-6838' into FW-6838-snapshots

3882c65

chore(): restore datetime snapshots

b75a284

chore(): add updated snapshots

123fd6e

Merge remote-tracking branch 'origin/FW-6838-tests' into FW-6838

c725df3

Merge branch 'FW-6838' into FW-6838-snapshots

ee176f7

# Conflicts: # core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-ionic-md-ltr-light-Mobile-Safari-linux.png

refactor(button): nest the min height and width tokens

bf191d5

Merge branch 'FW-6838' into FW-6838-snapshots

8a8969a

feat(button): sync the md theme with Material Design 2

1706c10

docs(breaking): note the md button's Material Design 2 values

1f01912

fix(button): scale the md padding with the font size

d70ee70

chore(): add updated snapshots

779f01f

chore(): restore re-encoded tab button snapshots

3301dc7

fix(button): measure the md icon gap against the icon size

1b796cf

feat(button): size md spinners to match the icon

085aa98

Merge remote-tracking branch 'origin/FW-6838-md-sync' into FW-6838-md…

8be6307

…-sync-snapshots

feat(button): sync the ios theme with iOS 17

ac4ba25

fix(button): fill pressed outline buttons in ios toolbars

5718f91

chore(): add updated snapshots

c846de9

Merge remote-tracking branch 'origin/FW-6838-md-sync-snapshots' into …

b6e6c2a

…FW-6838-ios-sync

chore(): add updated snapshots

2acdcda

chore(): add updated snapshots

00de99b

feat(button): space badges without a position from the label

408f69b

thetaPC added this pull request to stack #31629 October 23, 2026 22:58

github-actions Bot added the package: core @ionic/core package label Oct 23, 2026

chore(): add updated snapshots

cdd1add

vercel Bot deployed to Preview October 23, 2026 23:05

View deployment

thetaPC added 2 commits October 23, 2026 16:15

Merge remote-tracking branch 'origin/FW-6838-md-sync-snapshots' into …

dbf9efa

…FW-6838-ios-sync

Merge branch 'FW-6838-ios-sync-snapshots' of github.com:ionic-team/io…

a9dec5a

…nic-framework into FW-6838-ios-sync-snapshots

thetaPC mentioned this pull request Oct 23, 2026

feat(button): add recipe and tokens #31628

Draft

1 of 2 tasks

Ionitron and others added 16 commits October 23, 2026 23:34

chore(): add updated snapshots

75e0c4c

test(button): track the md dark pressed outline contrast under FW-6417

7938a15

test(button): show the disabled state for each color

ccd43e9

test(button): add the medium size to the size page

45837f2

fix(button): keep the default text color under the ripple

e2c3d40

chore(): add updated snapshots

c525f60

Merge remote-tracking branch 'origin/FW-6838-tests' into FW-6838

dac0162

# Conflicts: # core/src/components/button/test/basic/index.html

chore(): add updated snapshots

e57bdff

Merge remote-tracking branch 'origin/FW-6838-snapshots' into FW-6838-…

fee2093

…md-sync

chore(): add updated snapshots

7b9e3ce

Merge remote-tracking branch 'origin/FW-6838-md-sync-snapshots' into …

14475e9

…FW-6838-ios-sync

chore(): add updated snapshots

b3fc869

Merge remote-tracking branch 'origin/FW-6838-ios-sync-snapshots' into…

025dc92

… FW-6838-badge-spacing

vercel Bot deployed to Preview October 26, 2026 17:17

View deployment

thetaPC mentioned this pull request Oct 26, 2026

chore(button): update snapshots for the subtle hue #31656

Draft

1 of 2 tasks

fix(button): keep badges above neighboring buttons

dd3ef66

vercel Bot deployed to Preview October 26, 2026 18:07

View deployment

test(button): check that a badge stays above the next button

15b2ee0

thetaPC changed the title ~~feat(button): space badges without a position from the label~~ feat(button): improve badge spacing and stacking Oct 26, 2026

vercel Bot deployed to Preview October 26, 2026 18:18

View deployment

Base automatically changed from FW-6838-ios-sync-snapshots to ionic-modular October 26, 2026 22:54

Navigation Menu

Repository navigation

feat(button): improve badge spacing and stacking - #31647

feat(button): improve badge spacing and stacking#31647
thetaPC wants to merge 49 commits into
ionic-modularfrom
FW-6838-badge-spacing

thetaPC commented Oct 23, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Oct 23, 2026 •

edited

Loading

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

thetaPC commented Oct 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Known gaps

How to test

Uh oh!

vercel Bot commented Oct 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

thetaPC commented Oct 23, 2026 •

edited

Loading

vercel Bot commented Oct 23, 2026 •

edited

Loading